<template>
  <el-drawer v-model="addDrawer" size="45%" :show-close="false" @opened="openDrawer"
    @close="closeDrawer">
    <template #title>
      <h2><svg-icon icon-class="list"></svg-icon><span style="padding-left: 15px">{{typeName}}</span></h2>
      <el-button type="primary" @click="confirmClick" :disabled="drawerLoading" v-if="isShowSave">保存</el-button>
    </template>
    <template #default>
      <el-form :model="form" ref="addRef" :inline="true" :rules="formRules" label-width="140px" v-loading="drawerLoading">
        <el-row justify="space-between">
          <el-form-item label="省">
            <el-input v-model="form.province" clearable disabled></el-input>
          </el-form-item>
          <el-form-item label="市">
            <el-input v-model="form.city" clearable disabled></el-input>
          </el-form-item>
        </el-row>
        <el-row justify="space-between">
          <el-form-item label="区/县">
            <el-input v-model="form.county" clearable disabled></el-input>
          </el-form-item>
          <el-form-item label="编号" prop="id">
            <el-input v-model="form.id" placeholder="请输入编号" clearable maxlength="17"></el-input>
          </el-form-item>
        </el-row>
        <el-row justify="space-between">
          <el-form-item label="日期" prop="occurrenceDate">
            <el-input v-model="form.occurrenceDate" placeholder="请输入日期"  clearable maxlength="20" />
          </el-form-item>
          <el-form-item label="时（24小时制）" prop="occurrenceHour">
            <el-input v-model="form.occurrenceHour" placeholder="请输入时（24小时制）" clearable maxlength="2"></el-input>
          </el-form-item>
        </el-row>
        <el-row justify="space-between">
          <el-form-item label="分" prop="occurrenceMinute">
            <el-input v-model="form.occurrenceMinute" placeholder="请输入分" clearable maxlength="2"></el-input>
          </el-form-item>
          <el-form-item label="秒（至少小数点后两位）" prop="occurrenceSecond">
            <el-input v-model="form.occurrenceSecond" placeholder="请输入秒（至少小数点后两位）" clearable maxlength="8"></el-input>
          </el-form-item>
        </el-row>
        <el-row justify="space-between">
          <el-form-item label="震级 [Ml]" prop="magnitude">
            <el-input v-model="form.magnitude" placeholder="请输入震级 [Ml]" clearable maxlength="8"></el-input>
          </el-form-item>
          <el-form-item label="经度" prop="lon">
            <el-input v-model="form.lon" placeholder="请输入经度" clearable maxlength="8"></el-input>
          </el-form-item>
        </el-row>
        <el-row justify="space-between">
          <el-form-item label="纬度" prop="lat">
            <el-input v-model="form.lat" placeholder="请输入纬度" clearable maxlength="8"></el-input>
          </el-form-item>
          <el-form-item label="震源深度 [公里]" prop="depth">
            <el-input v-model="form.depth" placeholder="请输入震源深度 [公里]" clearable maxlength="8"></el-input>
          </el-form-item>
        </el-row>
        <el-row justify="space-between">
          <el-form-item label="定位残差 [秒]" prop="rms">
            <el-input v-model="form.rms" placeholder="请输入定位残差 [秒]" clearable maxlength="8"></el-input>
          </el-form-item>
        </el-row>
        <el-row justify="space-between">
          <el-form-item label="地名" prop="locationName" style="width: 100%">
            <el-input v-model="form.locationName" placeholder="请输入地名" :autosize="{ minRows: 2, maxRows: 4 }"
              type="textarea" show-word-limit maxlength="40" clearable></el-input>
          </el-form-item>
        </el-row>
        <el-row justify="space-between">
          <el-form-item label="宏观震中烈度" prop="epicenter">
            <el-input v-model="form.epicenter" placeholder="请输入宏观震中烈度" clearable maxlength="4"></el-input>
          </el-form-item>
          <el-form-item label="震相数" prop="seismicPhaseNum">
            <el-input v-model="form.seismicPhaseNum" placeholder="请输入震相数" clearable maxlength="4"></el-input>
          </el-form-item>
        </el-row>
        <el-row justify="space-between">
          <el-form-item label="东西向定位误差 [米]" prop="locationErrorX">
            <el-input v-model="form.locationErrorX" placeholder="请输入东西向定位误差 [米]" clearable maxlength="8"></el-input>
          </el-form-item>
          <el-form-item label="南北向定位误差 [米]" prop="locationErrorY">
            <el-input v-model="form.locationErrorY" placeholder="请输入南北向定位误差 [米]" clearable maxlength="8"></el-input>
          </el-form-item>
        </el-row>
        <el-row justify="space-between">
          <el-form-item label="深度定位误差 [米]" prop="locationErrorZ">
            <el-input v-model="form.locationErrorZ" placeholder="请输入深度定位误差 [米]" clearable maxlength="8"></el-input>
          </el-form-item>
          <el-form-item label="所用P波到时数" prop="nctp">
            <el-input v-model="form.nctp" placeholder="请输入所用P波到时数" clearable maxlength="4"></el-input>
          </el-form-item>
        </el-row>
        <el-row justify="space-between">
          <el-form-item label="所用S波到时数" prop="ncts">
            <el-input v-model="form.ncts" placeholder="请输入所用S波到时数" clearable maxlength="4"></el-input>
          </el-form-item>
        </el-row>
        <el-row justify="space-between">
          <el-form-item label="备注" prop="commentInfo" style="width:100%">
            <el-input v-model="form.commentInfo" placeholder="请输入备注" :autosize="{ minRows: 6, maxRows: 12 }"
              type="textarea" show-word-limit maxlength="2147483647" clearable></el-input>
          </el-form-item>
        </el-row>
      </el-form>
    </template>
  </el-drawer>
</template>
<script setup>
import useSpatialData from '@/hooks/useSpatialData'
import { eightDouble, fourInt } from '@/utils/validate'
const { route, addDrawer, drawerLoading, form, typeName, openDrawer, closeDrawer, confirmClick, isShowSave } = useSpatialData()
const formRules = {
  id: [{ required: true, message: '请填写编号！', trigger: 'blur' }],
  occurrenceDate: [{ required: true, message: '请填写日期！', trigger: 'blur' }],
  occurrenceHour: [{ required: true, message: '请填写时（24小时制）！', trigger: 'blur' }, { pattern: /\d{2}$/, message: '请输入2位的数字!', trigger: 'blur' }],
  occurrenceMinute: [{ required: true, message: '请填写分！', trigger: 'blur' }, { pattern: /\d{2}$/, message: '请输入2位的数字!', trigger: 'blur' }],
  occurrenceSecond: [{ required: true, message: '请填写秒（至少小数点后两位）！', trigger: 'blur' }, { pattern: /^(([1-9]+\d*)|(0{1}))(.[0-9]{2,})?$/, message: '请输入至少两位小数!', trigger: 'blur' }],
  magnitude: [{ required: true, message: '请填写震级 [Ml]！', trigger: 'blur' }, eightDouble],
  lon: [{ required: true, message: '请填写经度！', trigger: 'blur' }, eightDouble],
  lat: [{ required: true, message: '请填写纬度！', trigger: 'blur' }, eightDouble],
  depth: [{ required: true, message: '请填写震源深度 [公里]！', trigger: 'blur' }, eightDouble],
  rms: [{ required: true, message: '请填写定位残差 [秒]！', trigger: 'blur' }, eightDouble],
  epicenter: [fourInt],
  seismicPhaseNum: [fourInt],
  nctp: [fourInt],
  ncts: [fourInt],
  locationErrorX: [eightDouble],
  locationErrorY: [eightDouble],
  locationErrorZ: [eightDouble]
}
</script>
<style scoped></style>